<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="author" content="郭郑磊">
    <title>小米商城-首页</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/home.css">
    <style>
        
    </style>
</head>

<body>
    <!--1.顶部导航条-->
    <nav class="navbar  navbar-fixed-top">
        <div class="container-fluid ">
            <div class="row">
                <div class="logo col-xs-2"><img src="images/logo_e6453b2.png" alt=""></div>
                <div class="col-xs-12>
                    <form action="">
                        <input type="text" class="search col-xs-8" placeholder="输入商品名称">
                    </form>
                </div>
                <a for="" class="col-xs-2 deng">登录</a>
            </div>
        </div>
    </nav>
    <!--1.顶部导航条结束-->
    <!--2.滚动横幅-->
    <div class="banner">
        <div id="carousel-banner" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-banner" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-banner" data-slide-to="1"></li>
                <li data-target="#carousel-banner" data-slide-to="2"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="images/banner1.jpg" alt="...">
                    <div class="carousel-caption">

                    </div>
                </div>
                <div class="item">
                    <img src="images/banner2.jpg" alt="...">
                    <div class="carousel-caption">

                    </div>
                </div>
                <div class="item">
                    <img src="images/banner3.jpg" alt="...">
                    <div class="carousel-caption">

                    </div>
                </div>
            </div>

            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-banner" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-banner" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
    <!--2.滚动横幅结束-->
    <!--3.主题内容-->
    <main>
        <!--app广告-->
		<div class="app">
			<img src="images/app.png" alt=" " />
			<span class="close-app"></span>
		</div>
        
        
        <section class="lg-img">
            <a href="" class="sczb"><img src="images/sczb.png" alt=""></a>
            <a href="" class="snew">小米探索新品：品罗三轴拍摄稳定器</a>
        </section>
        <section class="gray-wrap"></section>
        <section class=" flex" style="margin-bottom:5px;">
            <section class="half-img">
                <img src="images/tel1.jpg" alt="">
            </section>
            <section class="half-img">
                <img src="images/tel2.jpg" class="top-img" alt="">
                <img src="images/tel3.jpg" alt="">
            </section>
        </section>
        <section class="mid-img">
            <img src="images/tel4.jpg" alt="">
        </section>
        <section class="gray-wrap"></section>
        <section class="mid-img">
            <img src="images/tel5.jpg" alt="">
        </section>
        <section class="left-img"></section>
        <section class="right-img"></section>
        <section class="bot-img"></section>
        <section class=""></section>
        <section class=""></section>
        <section class=""></section>
        <section class=""></section>
    </main>  
    <!--3.主题内容结束-->
         
    
    <!--4.底部导航条-->
    <footer class="navbar-fixed-bottom row">
        <div class="container">
            <div class="col-xs-3 toolbar-active">
                <a href="index.html">
                    <span class="glyphicon glyphicon-home"></span>
                    <p class="spa">首页</p>
                </a>
            </div>
            <div class="col-xs-3">
                <a href="product.html">
                    <span class="glyphicon glyphicon-list-alt"></span>
                    <p class="spa">分类</p>
                </a>
            </div>
            <div class="col-xs-3">
                <a href="carl.html">
                    <span class="glyphicon glyphicon-shopping-cart"></span>
                    <p class="spa">购物车</p>
                </a>
            </div>
            <div class="col-xs-3">
                <a href="user.html">
                    <span class="glyphicon glyphicon-user "></span>
                    <p class="spa">我的</p>
                </a>
            </div>
        </div>
    </footer>
    <!--底部导航条结束-->
    <script src="bootstrap/js/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="js/index.js"></script>
</body>

</html>